import React, {useState} from 'react';
import {
  Alert,
  Button,
  SafeAreaView,
  Switch,
  Text,
  TextInput,
  View,
} from 'react-native';
import MarqueeView from './MarqueeViewNativeComponent';

const App = () => {
  const [pointState, setPointState] = useState<'auto' | 'none'>('none');

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#f9f9f9'}}>
      <View style={{padding: 20, flex: 1}}>
        {/* 开关控制 */}
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 20,
          }}>
          <Switch
            value={pointState === 'none'}
            onValueChange={() =>
              setPointState(pointState === 'none' ? 'auto' : 'none')
            }
          />
          <Text style={{marginLeft: 10, fontSize: 16, color: '#333'}}>
            pointerEvents: {pointState}
          </Text>
        </View>

        {/* 内容区域 */}
        <View
          style={{
            flex: 1,
            backgroundColor: 'rgba(0,0,0,0.05)',
            borderRadius: 12,
            padding: 16,
          }}
          pointerEvents={pointState}>
          <View style={{marginBottom: 16}}>
            <Button
              title="点我一下"
              onPress={() => {
                console.log('触发了onChange');
                Alert.alert('点击了按钮');
              }}
            />
          </View>

          <TextInput
            style={{
              height: 44,
              borderColor: '#ccc',
              borderWidth: 1,
              borderRadius: 8,
              paddingHorizontal: 10,
              backgroundColor: '#fff',
              marginBottom: 16,
            }}
            placeholder="请输入内容"
          />

          <Text>自定义组件</Text>
          <MarqueeView
            style={{
              flex: 1,
              borderRadius: 12,
              backgroundColor: 'hsl(32, 80.40%, 50.00%)',
            }}
            onChange={e => {
              console.log('触发了onChange');
              Alert.alert('触发了自定义组件change');
            }}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default App;
